import React from 'react';
import {connect} from 'react-redux';
import action from '../../../store/action';
import Swiper from "swiper";
import TSwiper from '../../../components/home/index/swiper';
import Css from '../../../assets/css/home/index/index.css';
class Index extends React.Component{
    constructor(){
        super();
        this.state={
           navClass:[
               {
                   name:'潮流女装',
                   icn:'women',
                   bgColor:'#ffc003'
               },
               {
                   name:'品牌男装',
                   icn:'men',
                   bgColor:'#f79407'
               },
               {
                   name:'电脑办公',
                   icn:'computer',
                   bgColor:'#f87bbc'
               },
               {
                   name:'手机数码',
                   icn:'mobile',
                   bgColor:'#73bbff'
               },
           ]
        }
    }
    componentDidMount(){
        this.getSwiperData();
    }
    getSwiperData(){
        this.props.dispatch(
            action.actSwiper.getSwiper({
                success:()=>{this.indexSwiper()}
            })
        );
    }
    //swiper切换
    indexSwiper(){
        new Swiper('.'+Css['indSwiper'], {
            autoplay: {
                disableOnInteraction: false,
            },
            pagination: {
                el: '.swiper-pagination',
            },
            loop : true,

        })
    }
    render(){
        return(
            <div>
                {/*indexTop*/}
                <div className={Css['indTop']+' '+Css['active']}>
                    <div className={Css['indTopLeft']}><i className={'nav'}/></div>
                    <div className={Css['indTopCen']+' fs28'}><i className={'seach mr10'} />请输入宝贝名称</div>
                    <div className={'fs28'}>登录</div>
                    {/*<div className={Css['indTopRight']}><i className={'personal'} /></div>*/}
                </div>
                {/*indexSwiper*/}
                <TSwiper image={this.props.state.redSwiper.aSwiper}></TSwiper>

                {/*indexClass*/}

                <div className={Css['indexClass']}>
                    <ul>
                        {
                            this.state.navClass.length>0?this.state.navClass.map((item,index)=>{
                                return(
                                    <li key={index} className={'fs28'}><i className={item.icn+' fs50'} style={{background:item.bgColor}} />{item.name}</li>
                                )
                            }):''
                        }
                    </ul>
                </div>
                {/*Product*/}
                <div className={Css['indProduct']+' mt20'}>
                    <div className={Css['indTitle']+' '+Css['colf7']+' fs32'}>—— 潮流女装 ——</div>
                    <div className={Css['indProBox']}>
                        <div className={Css['indProItem']}>
                            <div className={Css['indProTitle']+' ovflOne'}>高跟鞋女2018新款春季单鞋仙女甜美链子尖头防水台细跟女鞋一字带</div>
                            <div className={Css['indProTitleLabel']+' mt10 '}><p className={Css['colf7']+' fs28'}>精品打折</p><span className={Css['bgBorRi']}>12.8元</span></div>
                            <div className={Css['indProImg']+' mt20'}><img src={'//vueshop.glbuys.com/uploadfiles/1524556409.jpg'} alt={'asd'} /> </div>
                        </div>
                        <div className={Css['indProItem']+' lineL'}>
                            <div className={Css['indProItemLi']}>
                                <div className={Css['indProItemLiFont']}>
                                    <div className={Css['indProTitle']+' ovflOne'}>高跟鞋女2018新款春季单鞋仙女甜美链子尖头防水台细跟女鞋一字带</div>
                                    <div className={Css['indProTitleLabel']+' mt10 '}><p className={' fs28'}>品质精挑</p></div>
                                </div>
                                <div className={Css['indProItemLiImg']}>
                                    <img src={'//vueshop.glbuys.com/uploadfiles/1524556409.jpg'} alt={'asd'} />
                                </div>
                            </div>
                            <div className={Css['indProItemLi']}>
                                <div className={Css['indProItemLiFont']}>
                                    <div className={Css['indProTitle']+' ovflOne'}>高跟鞋女2018新款春季单鞋仙女甜美链子尖头防水台细跟女鞋一字带</div>
                                    <div className={Css['indProTitleLabel']+' mt10 '}><p className={' fs28'}>品质精挑</p></div>
                                </div>
                                <div className={Css['indProItemLiImg']}>
                                    <img src={'//vueshop.glbuys.com/uploadfiles/1524556409.jpg'} alt={'asd'} />
                                </div>
                            </div>
                        </div>
                    </div>
                    <div className={Css['indProList']}>
                        <ul>
                            <li>
                                <div className={Css['indProTitle']+' ovflOne'}>高跟鞋女2018新款春季单鞋仙女甜美链子尖头防水台细跟女鞋一字带</div>
                                <div className={Css['indProListImg']}><img src={'//vueshop.glbuys.com/uploadfiles/1524556409.jpg'} alt={'asd'} /></div>
                                <div className={Css['indProListPrice']+' fs28 mt5'}>￥288</div>
                                <div className={Css['unIndProListPrice']+' fs28 '}>￥388</div>
                            </li>
                            <li>
                                <div className={Css['indProTitle']+' ovflOne'}>高跟鞋女2018新款春季单鞋仙女甜美链子尖头防水台细跟女鞋一字带</div>
                                <div className={Css['indProListImg']}><img src={'//vueshop.glbuys.com/uploadfiles/1524556409.jpg'} alt={'asd'} /></div>
                                <div className={Css['indProListPrice']+' fs28 mt5'}>￥288</div>
                                <div className={Css['unIndProListPrice']+' fs28 '}>￥388</div>
                            </li>
                            <li>
                                <div className={Css['indProTitle']+' ovflOne'}>高跟鞋女2018新款春季单鞋仙女甜美链子尖头防水台细跟女鞋一字带</div>
                                <div className={Css['indProListImg']}><img src={'//vueshop.glbuys.com/uploadfiles/1524556409.jpg'} alt={'asd'} /></div>
                                <div className={Css['indProListPrice']+' fs28 mt5'}>￥288</div>
                                <div className={Css['unIndProListPrice']+' fs28 '}>￥388</div>
                            </li>
                            <li>
                                <div className={Css['indProTitle']+' ovflOne'}>高跟鞋女2018新款春季单鞋仙女甜美链子尖头防水台细跟女鞋一字带</div>
                                <div className={Css['indProListImg']}><img src={'//vueshop.glbuys.com/uploadfiles/1524556409.jpg'} alt={'asd'} /></div>
                                <div className={Css['indProListPrice']+' fs28 mt5'}>￥288</div>
                                <div className={Css['unIndProListPrice']+' fs28 '}>￥388</div>
                            </li>
                        </ul>
                    </div>
                </div>
                <div className={Css['indProduct']+' mt20'}>
                    <div className={Css['indTitle']+' '+Css['colfe']+' fs32'}>—— 品牌男装 ——</div>
                    <div className={Css['indProBox']}>
                        <div className={Css['indProItem']}>
                            <div className={Css['indProTitle']+' ovflOne'}>高跟鞋女2018新款春季单鞋仙女甜美链子尖头防水台细跟女鞋一字带</div>
                            <div className={Css['indProTitleLabel']+' mt10 '}><p className={' fs28'}>精品打折</p></div>
                            <div className={Css['indProImg']+' mt20'}><img src={'//vueshop.glbuys.com/uploadfiles/1524556409.jpg'} alt={'asd'} /> </div>
                        </div>
                        <div className={Css['indProItem']}>
                            <div className={Css['indProTitle']+' ovflOne'}>高跟鞋女2018新款春季单鞋仙女甜美链子尖头防水台细跟女鞋一字带</div>
                            <div className={Css['indProTitleLabel']+' mt10 '}><p className={' fs28'}>精品打折</p></div>
                            <div className={Css['indProImg']+' mt20'}><img src={'//vueshop.glbuys.com/uploadfiles/1524556409.jpg'} alt={'asd'} /> </div>
                        </div>
                    </div>
                    <div className={Css['indProList']}>
                        <ul>
                            <li>
                                <div className={Css['indProTitle']+' ovflOne'}>高跟鞋女2018新款春季单鞋仙女甜美链子尖头防水台细跟女鞋一字带</div>
                                <div className={Css['indProListImg']}><img src={'//vueshop.glbuys.com/uploadfiles/1524556409.jpg'} alt={'asd'} /></div>
                                <div className={Css['indProListPrice']+' fs28 mt5'}>￥288</div>
                                <div className={Css['unIndProListPrice']+' fs28 '}>￥388</div>
                            </li>
                            <li>
                                <div className={Css['indProTitle']+' ovflOne'}>高跟鞋女2018新款春季单鞋仙女甜美链子尖头防水台细跟女鞋一字带</div>
                                <div className={Css['indProListImg']}><img src={'//vueshop.glbuys.com/uploadfiles/1524556409.jpg'} alt={'asd'} /></div>
                                <div className={Css['indProListPrice']+' fs28 mt5'}>￥288</div>
                                <div className={Css['unIndProListPrice']+' fs28 '}>￥388</div>
                            </li>
                            <li>
                                <div className={Css['indProTitle']+' ovflOne'}>高跟鞋女2018新款春季单鞋仙女甜美链子尖头防水台细跟女鞋一字带</div>
                                <div className={Css['indProListImg']}><img src={'//vueshop.glbuys.com/uploadfiles/1524556409.jpg'} alt={'asd'} /></div>
                                <div className={Css['indProListPrice']+' fs28 mt5'}>￥288</div>
                                <div className={Css['unIndProListPrice']+' fs28 '}>￥388</div>
                            </li>
                            <li>
                                <div className={Css['indProTitle']+' ovflOne'}>高跟鞋女2018新款春季单鞋仙女甜美链子尖头防水台细跟女鞋一字带</div>
                                <div className={Css['indProListImg']}><img src={'//vueshop.glbuys.com/uploadfiles/1524556409.jpg'} alt={'asd'} /></div>
                                <div className={Css['indProListPrice']+' fs28 mt5'}>￥288</div>
                                <div className={Css['unIndProListPrice']+' fs28 '}>￥388</div>
                            </li>
                        </ul>
                    </div>
                </div>
                <div className={Css['indProduct']+' mt20'}>
                    <div className={Css['indTitle']+' '+Css['col5f']+' fs32'}>—— 电脑办公 ——</div>
                    <div className={Css['indProBox']}>
                        <div className={Css['indProItem']}>
                            <div className={Css['indProTitle']+' ovflOne'}>高跟鞋女2018新款春季单鞋仙女甜美链子尖头防水台细跟女鞋一字带</div>
                            <div className={Css['indProTitleLabel']+' mt10 '}><p className={Css['colf7']+' fs28'}>精品打折</p><span className={Css['bgBorRi']}>12.8元</span></div>
                            <div className={Css['indProImg']+' mt20'}><img src={'//vueshop.glbuys.com/uploadfiles/1524556409.jpg'} alt={'asd'} /> </div>
                        </div>
                        <div className={Css['indProItem']+' lineL'}>
                            <div className={Css['indProItemLi']}>
                                <div className={Css['indProItemLiFont']}>
                                    <div className={Css['indProTitle']+' ovflOne'}>高跟鞋女2018新款春季单鞋仙女甜美链子尖头防水台细跟女鞋一字带</div>
                                    <div className={Css['indProTitleLabel']+' mt10 '}><p className={' fs28'}>品质精挑</p></div>
                                </div>
                                <div className={Css['indProItemLiImg']}>
                                    <img src={'//vueshop.glbuys.com/uploadfiles/1524556409.jpg'} alt={'asd'} />
                                </div>
                            </div>
                            <div className={Css['indProItemLi']}>
                                <div className={Css['indProItemLiFont']}>
                                    <div className={Css['indProTitle']+' ovflOne'}>高跟鞋女2018新款春季单鞋仙女甜美链子尖头防水台细跟女鞋一字带</div>
                                    <div className={Css['indProTitleLabel']+' mt10 '}><p className={' fs28'}>品质精挑</p></div>
                                </div>
                                <div className={Css['indProItemLiImg']}>
                                    <img src={'//vueshop.glbuys.com/uploadfiles/1524556409.jpg'} alt={'asd'} />
                                </div>
                            </div>
                        </div>
                    </div>
                    <div className={Css['indProList']}>
                        <ul>
                            <li>
                                <div className={Css['indProTitle']+' ovflOne'}>高跟鞋女2018新款春季单鞋仙女甜美链子尖头防水台细跟女鞋一字带</div>
                                <div className={Css['indProListImg']}><img src={'//vueshop.glbuys.com/uploadfiles/1524556409.jpg'} alt={'asd'} /></div>
                                <div className={Css['indProListPrice']+' fs28 mt5'}>￥288</div>
                                <div className={Css['unIndProListPrice']+' fs28 '}>￥388</div>
                            </li>
                            <li>
                                <div className={Css['indProTitle']+' ovflOne'}>高跟鞋女2018新款春季单鞋仙女甜美链子尖头防水台细跟女鞋一字带</div>
                                <div className={Css['indProListImg']}><img src={'//vueshop.glbuys.com/uploadfiles/1524556409.jpg'} alt={'asd'} /></div>
                                <div className={Css['indProListPrice']+' fs28 mt5'}>￥288</div>
                                <div className={Css['unIndProListPrice']+' fs28 '}>￥388</div>
                            </li>
                            <li>
                                <div className={Css['indProTitle']+' ovflOne'}>高跟鞋女2018新款春季单鞋仙女甜美链子尖头防水台细跟女鞋一字带</div>
                                <div className={Css['indProListImg']}><img src={'//vueshop.glbuys.com/uploadfiles/1524556409.jpg'} alt={'asd'} /></div>
                                <div className={Css['indProListPrice']+' fs28 mt5'}>￥288</div>
                                <div className={Css['unIndProListPrice']+' fs28 '}>￥388</div>
                            </li>
                            <li>
                                <div className={Css['indProTitle']+' ovflOne'}>高跟鞋女2018新款春季单鞋仙女甜美链子尖头防水台细跟女鞋一字带</div>
                                <div className={Css['indProListImg']}><img src={'//vueshop.glbuys.com/uploadfiles/1524556409.jpg'} alt={'asd'} /></div>
                                <div className={Css['indProListPrice']+' fs28 mt5'}>￥288</div>
                                <div className={Css['unIndProListPrice']+' fs28 '}>￥388</div>
                            </li>
                        </ul>
                    </div>
                </div>
                {/*Recommend*/}
                <div className={Css['indRecommendTitle']+' fs32 mt10'}><span><i className={'recommend'} /> 为你推荐</span></div>
                <div className={Css['indRecommend']}>
                    <ul>
                        <li>
                            <div className={Css['indRecommendImg']}><img src={'//vueshop.glbuys.com/uploadfiles/1524556409.jpg'} alt={'asd'} /></div>
                            <div className={Css['indRecommendFont']+' ovflOnes fs28 mt15'}>阿迪达斯2016秋季新款女子运动休闲下装针织短裤</div>
                            <div className={Css['indProListPrice']+' fs28 mt5'}>￥288</div>
                        </li>
                        <li>
                            <div className={Css['indRecommendImg']}><img src={'//vueshop.glbuys.com/uploadfiles/1524556409.jpg'} alt={'asd'} /></div>
                            <div className={Css['indRecommendFont']+' ovflOnes fs28 mt15'}>阿迪达斯2016秋季新款女子运动休闲下装针织短裤</div>
                            <div className={Css['indProListPrice']+' fs28 mt5'}>￥288</div>
                        </li>
                        <li>
                            <div className={Css['indRecommendImg']}><img src={'//vueshop.glbuys.com/uploadfiles/1524556409.jpg'} alt={'asd'} /></div>
                            <div className={Css['indRecommendFont']+' ovflOnes fs28 mt15'}>阿迪达斯2016秋季新款女子运动休闲下装针织短裤</div>
                            <div className={Css['indProListPrice']+' fs28 mt5'}>￥288</div>
                        </li>
                        <li>
                            <div className={Css['indRecommendImg']}><img src={'//vueshop.glbuys.com/uploadfiles/1524556409.jpg'} alt={'asd'} /></div>
                            <div className={Css['indRecommendFont']+' ovflOnes fs28 mt15'}>阿迪达斯2016秋季新款女子运动休闲下装针织短裤</div>
                            <div className={Css['indProListPrice']+' fs28 mt5'}>￥288</div>
                        </li>
                        <li>
                            <div className={Css['indRecommendImg']}><img src={'//vueshop.glbuys.com/uploadfiles/1524556409.jpg'} alt={'asd'} /></div>
                            <div className={Css['indRecommendFont']+' ovflOnes fs28 mt15'}>阿迪达斯2016秋季新款女子运动休闲下装针织短裤</div>
                            <div className={Css['indProListPrice']+' fs28 mt5'}>￥288</div>
                        </li>
                        <li>
                            <div className={Css['indRecommendImg']}><img src={'//vueshop.glbuys.com/uploadfiles/1524556409.jpg'} alt={'asd'} /></div>
                            <div className={Css['indRecommendFont']+' ovflOnes fs28 mt15'}>阿迪达斯2016秋季新款女子运动休闲下装针织短裤</div>
                            <div className={Css['indProListPrice']+' fs28 mt5'}>￥288</div>
                        </li>
                        <li>
                            <div className={Css['indRecommendImg']}><img src={'//vueshop.glbuys.com/uploadfiles/1524556409.jpg'} alt={'asd'} /></div>
                            <div className={Css['indRecommendFont']+' ovflOnes fs28 mt15'}>阿迪达斯2016秋季新款女子运动休闲下装针织短裤</div>
                            <div className={Css['indProListPrice']+' fs28 mt5'}>￥288</div>
                        </li>
                        <li>
                            <div className={Css['indRecommendImg']}><img src={'//vueshop.glbuys.com/uploadfiles/1524556409.jpg'} alt={'asd'} /></div>
                            <div className={Css['indRecommendFont']+' ovflOnes fs28 mt15'}>阿迪达斯2016秋季新款女子运动休闲下装针织短裤</div>
                            <div className={Css['indProListPrice']+' fs28 mt5'}>￥288</div>
                        </li>
                        <li>
                            <div className={Css['indRecommendImg']}><img src={'//vueshop.glbuys.com/uploadfiles/1524556409.jpg'} alt={'asd'} /></div>
                            <div className={Css['indRecommendFont']+' ovflOnes fs28 mt15'}>阿迪达斯2016秋季新款女子运动休闲下装针织短裤</div>
                            <div className={Css['indProListPrice']+' fs28 mt5'}>￥288</div>
                        </li>
                    </ul>
                </div>
            </div>
        )
    }
}
export default connect((state)=>{
    return {
        state:state
    }
})(Index);